<template>
  <template
    v-for="(colKey, i) in colKeys"
    :key="`colKey${i}`"
  >
    <th
      v-if="spanSize(colKeys, i, colIndex) !== -1"
      class="pvtColLabel"
      :colSpan="spanSize(colKeys, i, colIndex)"
    >
      {{ getText(colKey[colIndex]) }}
    </th>
  </template>
</template>

<script setup>
import { useProvidePivotData } from '@/pivottable/composables/useProvidePivotData'

const props = defineProps({
  colKeys: {
    type: Array,
    required: true
  },
  colIndex: {
    type: Number,
    required: true
  },
  colAttrsLength: {
    type: Number,
    required: true
  },
  rowAttrsLength: {
    type: Number,
    required: true
  },
  fields: {
    type: Array,
    default: () => []
  },
  localeStrings: {
    type: Object,
  },
  aggregatorName: {
    type: String,
  }
})

const { spanSize } = useProvidePivotData()

const getText = (text) => {
  const item = props.fields.find(x => x.codeName === text);
  if (item) {
    return item.caption;
  }
  const aggregatorName = props.aggregatorName.toLowerCase();
  if (props.colIndex === props.colAttrsLength - 1 && aggregatorName === 'count') {
    return props.localeStrings[aggregatorName] || text;
  }
  return text;
};
</script>
